<template>
  <div class="duyi-dropdown">
    <!-- 触发元素，即Tooltip组件 -->
    <Duyi-Tooltip
      :placement="placement"
      :trigger="trigger"
      :open-delay="openDelay"
      :close-delay="closeDelay"
      :manual="manual"
      @visible-change="visibleChangeHandler"
      ref="tooltipRef"
    >
      <!-- 触发元素 -->
      <slot></slot>
      <!-- 内容 -->
      <template #content>
        <!-- 生成具体的提示内容，插入到content具名插槽里面 -->
        <ul class="duyi-dropdown__menu">
          <template v-for="item in menuOptions" :key="item.key">
            <!-- 这个li标签是用来做分割线的 -->
            <li v-if="item.divided" class="divided-placeholder"></li>
            <li
              class="duyi-dropdown__item"
              :class="{ 'is-disabled': item.disabled }"
              :id="`dropdown-item-${item.key}`"
              @click="itemClickHandler(item)"
            >
              <RenderVnode :v-node="item.label"></RenderVnode>
            </li>
          </template>
        </ul>
      </template>
    </Duyi-Tooltip>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import propsObj from './props.js'
import RenderVnode from '../Common/RenderVnode.js'
defineOptions({
  name: 'DuyiDropdown',
})
// 组件实例
const tooltipRef = ref(null)
// 属性
const props = defineProps(propsObj)
// 事件
const emit = defineEmits(['select', 'visible-change'])

// 某一项被点击的处理函数
const itemClickHandler = item => {
  // 判断是否是禁用的
  if (item.disabled) return
  // 触发 select 事件
  emit('select', item)
  // 如果用户传递了 hideAfterClick 属性，说明需要点击后关闭下拉菜单
  // 这里就手动调用 hide 方法关闭即可
  // 处理hideAfterClick属性
  if (props.hideAfterClick) {
    tooltipRef.value.hide()
  }
}

// Tooltip 的事件visible-change 处理函数
const visibleChangeHandler = visible => {
  emit('visible-change', visible)
}

// 处理手动触发显示隐藏 manual属性
defineExpose({
  show: () => tooltipRef.value.show(),
  hide: () => tooltipRef.value.hide(),
})
</script>

<style lang="scss" scoped>
.bar {
  color: red;
  font-style: italic;
}
</style>
